<article class="component active" id='notification' data-url="notification">
  <h2 class="component-title">Notification</h2>
  <p class="component-description">You can show some notifications. It's a iOS like notification that you can set icon, title and text, and you can alose drag to close the notification.</p>

  <p>Use JavaScript to open/close notification:</p>
  
{% highlight js %}  
$.notification({
  title: "Baby",
  text: "I miss you",
  media: "<img src='...'>",
  data: "123",
  onClick: function(data) {
    $.alert("Click" + data);
  },
  onClose: function(data) {
    $.alert("Close "+data);
  }
});

//close notification

$.closeNotification();

{% endhighlight %}
  
  <p>There is only one notification can shown in the same time. It means that the new notification will replace the old one.</p>


  <h3>Params</h3>

  <table>
    <tr>
      <th>Param</th>
      <th>Default</th>
      <th>Description</th>
    </tr>
    <tr>
      <td>title</td>
      <td>undefined</td>
      <td>Title of notification</td>
    </tr>
    <tr>
      <td>text</td>
      <td>undefined</td>
      <td>Text of notification</td>
    </tr>
    <tr>
      <td>media</td>
      <td>undefined</td>
      <td>Media of notification. It should be a icon with image or iconfont.</td>
    </tr>
    <tr>
      <td>data</td>
      <td>undefined</td>
      <td>This data will be the param of onClick and onClose function.</td>
    </tr>
    <tr>
      <td>onClick</td>
      <td>undefined</td>
      <td>Callback when user click.</td>
    </tr>
    <tr>
      <td>onClose</td>
      <td>undefined</td>
      <td>Callback when notification is closed.</td>
    </tr>
    <tr>
      <td>time</td>
      <td>4000</td>
      <td>The duration of notification.</td>
    </tr>
  </table>
</article>
